<template>
  <view class="container">
    <view class="search-container">
      <view class="search-input-container">
        <view class="search-bar-container">
          <uni-search-bar
            placeholder="搜索律师姓名"
            v-model="searchQuery"
            @confirm="handleSearch"
            @clear="handleClear"
          />
        </view>
        <view class="expertise-container">
          <input
            class="expertise-input"
            placeholder="专业领域"
            v-model="expertise"
            @confirm="handleSearch"
          />
        </view>
      </view>
      <view class="button-container">
        <button class="search-button" @click="handleSearch">
          <uni-icons type="search" size="16" color="#fff" />
          <text>搜索</text>
        </button>
        <button v-if="searchQuery || expertise" class="clear-button" @click="handleClear">
          清除
        </button>
      </view>
    </view>

    <view v-if="loading" class="loading">
      <uni-load-more status="loading" />
    </view>
    <view v-else>
      <view class="lawyer-list">
        <view
          v-for="item in lawyers"
          :key="item.lawyerId"
          class="lawyer-card"
          @click="navigateToDetail(item.lawyerId)"
        >
          <view class="lawyer-info">
            <text class="lawyer-name">{{item.lawyerName}}</text>
            <text class="title">{{item.title}}</text>
            <text class="law-firm">{{item.lawFirmName}}</text>
            <text class="expertise">专业领域: {{item.expertise}}</text>
            <view class="rating-container">
              <text class="rating">评分: {{item.averageRating}}</text>
              <text class="price">咨询费: ¥{{item.consultationPrice}}/次</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getLawyerList } from '@/api/lawyer'

export default {
  data() {
    return {
      lawyers: [],
      loading: false,
      searchQuery: '',
      expertise: ''
    }
  },
  onLoad() {
    this.fetchLawyers()
  },
  methods: {
    async fetchLawyers(params = {}) {
      try {
        this.loading = true
        const queryParams = {
          ...params,
          lawyerName: this.searchQuery,
          expertise: this.expertise
        }
        
        const response = await getLawyerList(queryParams)
        if (response.code === 200) {
          this.lawyers = response.data
        } else {
          uni.showToast({
            title: '获取律师列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取律师列表失败:', error)
        uni.showToast({
          title: error.message || '获取律师列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      uni.hideKeyboard()
      this.fetchLawyers()
    },
    handleClear() {
      this.searchQuery = ''
      this.expertise = ''
      this.fetchLawyers({})
    },
    navigateToDetail(lawyerId) {
      uni.navigateTo({
        url: `/pages/lawyer/detail?id=${lawyerId}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  flex: 1;
  background-color: #f5f5f5;
}

.search-container {
  background-color: #fff;
  padding: 24rpx 32rpx;
}

.search-input-container {
  margin-bottom: 16rpx;
}

.expertise-container {
  margin-top: 16rpx;
}

.expertise-input {
  height: 80rpx;
  padding: 0 24rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;
}

.search-button {
  flex: 1;
  margin-right: 16rpx;
  background-color: #0066cc;
  color: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  text {
    margin-left: 8rpx;
  }
}

.clear-button {
  padding: 0 32rpx;
  border: 2rpx solid #0066cc;
  color: #0066cc;
  background-color: #fff;
  border-radius: 16rpx;
}

.lawyer-list {
  padding: 16rpx;
}

.lawyer-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.lawyer-info {
  display: flex;
  flex-direction: column;
}

.lawyer-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.law-firm {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.expertise {
  font-size: 28rpx;
  color: #444;
  margin-top: 8rpx;
}

.rating-container {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;
}

.rating {
  font-size: 28rpx;
  color: #f5a623;
}

.price {
  font-size: 28rpx;
  color: #e74c3c;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
}
</style> 